﻿    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Tables</title>
    </head>
    <body>
     
        <style type="text/css">
            table
            {
              border-collapse:collapse;  
            }
            thead,tfoot
            {
                background-color: #CCCCCC;
            }
            tr
            {
                border-color:Blue;
            }
            td
            {
                border-color: #0000FF;
            }
            td.footer
            {
                border:none;
            }
            .active {
                border: 1px solid red; border-width: 1px;
            }
            .style1
            {
                width: 275px;
                border-color: #0000FF;
            }
            .style2
            {
                width: 160px;
                border-color: #0000FF;
            }
            .style3
            {
                width: 181px;
                border-color: #0000FF;
            }
            .style4
            {
                width: 153px;
                border-color: #0000FF;
               
            }
             #btn
            {
                background-image: url('btn.png');
                color: #00FFFF;height: 22px; width: 22px;
                background-position: center;
                background-repeat: no-repeat;
                width: 22px;
                height: 22px;
            }
            #btn1
            {
                background-image: url('btn 1.png');
                color: #00FFFF;height: 22px; width: 22px;
                background-position: center;
                background-repeat: no-repeat;
                width: 22px;
                height: 22px;
            }
            #btn2
            {
                background-image: url('btn 2.png');
                color: #00FFFF;height: 22px; width: 22px;
                background-position: center;
                background-repeat: no-repeat;
                width: 22px;
                height: 22px;
            }
            #btn3
            {
                background-image: url('btn 3.png');
                color: #00FFFF;height: 22px; width: 22px;
                background-position: center;
                background-repeat: no-repeat;
                width: 22px;
                height: 22px;
            }
            #btn4
            {
                background-image: url('btn 4.png');
                color: #00FFFF;height: 23px; width: 23px;
                background-position: center;
                background-repeat: no-repeat;
                width: 22px;
                height: 22px;
            }
            #numberOfpages
            {
                width: 50px;
            }
            .pages
            {
                text-align: right;
            }
            td.pages
            {
                border:none;
            }
        </style>
        <form id="form1" action="?" method="GET" name="form1">
            <table border="1" style="border-color: #0000FF">
                <thead>
                    <tr>
                        <td colspan="6">Drag a column header and drop it here by that column
                        </td>
                    </tr>
                    <tr>
                        <td>
                            ProductID
                        </td>
                        <td class="style1">
                            Product name
                        </td>
                        <td class="style2">
                            Unit price
                        </td>
                        <td class="style3">
                            Quantity per unit
                        </td>
                        <td class="style4">
                            Units in stock
                        </td>
                        <td>
                            Discontinued
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input <="" td="" style="width: 35px" type="text">
                        </td><td class="style1">
                            <input <="" td="" style="width: 135px" type="text"></td>
                        <td class="style2">
                            <input <="" td="" style="width: 100px" type="text">
                            <input id="btn" type="button" ></td>
                        <td class="style3">
                            <input <="" td="" style="width: 100px" type="text">
                         
                            </td>
                        <td class="style4">
                           <input  type="text"style="width: 100px"/>
                            <input id="Button1" type="button" />
                        </td>
                        <td>
                            <input type="checkbox" />
                            <input id="Button2" type="button" />
     
                        </td>
                    </tr>
            </thead>
                <tbody>
                     <tr>
                        <td>
                            1
                        </td><td class="style1" >  
                            Chai
                        </td>
                        <td class="style2">
                            $18.00
                        </td>
                        <td class="style3">
                            10 boxes x 20 bags
                        </td>
                        <td class="style4">
                            39
                        </td>
                        <td><input type="checkbox" />
                        </td>
                    </tr>
                    <tr>
                                    <td>
                                        2</td>
                                    <td class="style1">
                                        Chang</td>
                                    <td class="style2">
                                        $19.00
                                    </td>
                                    <td class="style3">
                                        24-12 oz bottles
                                    </td>
                                    <td class="style4">
                                        17</td>
                                    <td><input type="checkbox" />
                                    </td>
                                </tr>
                            <tr>
                    <td>
                        3</td>
                    <td class="style1">
                        Aniseed Syrup</td>
                    <td class="style2">
                        $10.00
                    </td>
                    <td class="style3">
                        12-550 ml bottles
                    </td>
                    <td class="style4">
                        13
                    </td>
                    <td><input type="checkbox" />
                    </td>
                </tr>
                <tr>
                    <td>
                        4</td>
                    <td class="style1">
                        Chef Anton's Cajun Seasoning</td>
                    <td class="style2">
                        $22.00
                    </td>
                    <td class="style3">
                        48-6 oz jars</td>
                    <td class="style4">
                        53</td>
                    <td><input type="checkbox" />
                    </td>
                </tr>            <tr>
                    <td>
                        5</td>
                    <td class="style1">
                        Chef Anton's Gumbo Mix</td>
                    <td class="style2">
                        $21.35
                    </td>
                    <td class="style3">
                        36 boxes
                    </td>
                    <td class="style4">
                        0</td>
                    <td><input type="checkbox" checked="checked" />
                    </td>
                </tr>
                            <tr>
                    <td>
                        6
                    </td>
                    <td class="style1">
                        Grandma's Boysenberry Spread</td>
                    <td class="style2">
                        $25.00
                    </td>
                    <td class="style3">
                        12-8 oz jars</td>
                    <td class="style4">
                        120
                    </td>
                    <td><input type="checkbox" />
                    </td>
                </tr>            
                <tr>
                    <td>
                        7</td>
                    <td class="style1">
                        Uncle Bob's Organic Dried Pears</td>
                    <td class="style2">
                        $30.00
                    </td>
                    <td class="style3">
                        12-1 lb pkgs
                    </td>
                    <td class="style4">
                        15</td>
                    <td><input type="checkbox" />
                    </td>
                </tr>
                            <tr>
                    <td>
                        8
                    </td>
                    <td class="style1">
                        Northwood's Cranberry Sauce</td>
                    <td class="style2">
                        $40.00
                    </td>
                    <td class="style3">
                        12-12 oz jars</td>
                    <td class="style4">
                        6</td>
                    <td><input type="checkbox" />
                    </td>
                </tr>
                            <tr>
                    <td>
                        9</td>
                    <td class="style1">
                        Mishi Kobe Niku</td>
                    <td class="style2">
                        $97.00
                    </td>
                    <td class="style3">
                        18-500 g pkgs</td>
                    <td class="style4">
                        29
                    </td>
                    <td><input type="checkbox" checked="checked" />
                    </td>
                </tr>
                            <tr>
                    <td>
                        10</td>
                    <td class="style1">
                        Ikura</td>
                    <td class="style2">
                        $31.00
                    </td>
                    <td class="style3">
                        12-200 ml jars
                    </td>
                    <td class="style4">
                        31</td>
                    <td><input type="checkbox" />
                    </td>
                </tr>
            </tbody>
                <tfoot>
                <tr>
                    <td colspan="2" class="footer ">
                    &nbsp;&nbsp;&nbsp;
                    <input type="button" id="btn1" />
                    <input type="button" id="btn2" />&nbsp;
                    <a class="active" href="#" style="padding: 2px"  >1</a>&nbsp;
                    <a href="#">2</a>&nbsp;
                    <a href="#">3</a>&nbsp;
                    <a href="#">4</a>&nbsp;
                    <a href="#">5</a>&nbsp;
                    <a href="#">6</a>&nbsp;
                    <a href="#" shape="circle">7</a>&nbsp;
                    <a href="#">8</a>&nbsp;
                    <a href="#">9</a>&nbsp;
                    <a href="#">10</a>&nbsp;  
                    <input type="button" id="btn3" />
                    <input type="button" id="btn4" />
                    </td>
                    <td colspan="2" class="footer">
                    <label for="numberOfpages">Page size:</label>
                        <select id="numberOfpages">
                             <option>5</option>
                             <option selected="selected">10</option>
                             <option>15</option>
                             <option>20</option>
                        </select>
                    </td>
                    <td colspan="2" class="pages">
                        335104 items in33511 pages</td>
                </tr>
            </tfoot>
        </table>
      </form>
    </body>
     
     
    </html>
